<template>
	<view class="box">
		<view class="topbox">
			<view class="inputbox">
				<image src="https://fangguaner.wm76.mtnet.ren/static/applet/sousuo.png" mode="" class="inputimg">
				</image>
				<input type="text" value="" placeholder="请输入客户姓名搜索" />
			</view>
			<view class="addguest" @click="uploadpassenger">
				+上传客源
			</view>
		</view>

		<view class="ifobox" v-for="(item,index) in arr" :key="index">
			<view class="left">
				<view class="top">
					<text class="plotname">{{item.contact || "未知"}}</text>
					<text class="house">{{item.type==1?"二手房":"租房"}}</text>
				</view>
				<view class="typestyle" @click="pushout(item.id)">
					推入公客池
				</view>
			</view>
			<view class="callbox">
				<text class="telephone">{{item.contact_number || "未知"}}</text>
				<image
					src="http://fangguaner.oss-cn-chengdu.aliyuncs.com/upload/20210722/111764a58b3828313e359f22ee2be454.png"
					mode="" @click="call(item.contact_number)"></image>
				<!-- <image
					src="http://fangguaner.oss-cn-chengdu.aliyuncs.com/upload/20210722/111764a58b3828313e359f22ee2be454.png"
					mode=""></image> -->
			</view>
			<view class="hr"></view>
			<view class="lastbox">
				<view class="policebox">
					<image src="https://fangguaner.wm76.mtnet.ren/static/applet/jincha.png" mode="" class="police"
						v-if="item.community">
					</image>
					<text class="dwell">{{item.community || ""}}</text>
					<text class="username">{{item.guard || ""}}</text>
				</view>
				<view class="btnbox">
					<view class="offer" @click="offer(item.id)">
						邀约
					</view>
					<view class="follow" @click="follow(item.id)">
						跟进
					</view>
				</view>
			</view>
		</view>
		<!-- <BaseBottom :selectPath="'/pages/Sourceofcustomers/index'"></BaseBottom> -->
	</view>
</template>

<script>
	import {
		passengersourcedata,
		getpushout
	} from "../../api/api/index.js"
	import BaseBottom from "../../components/BaseBottom/index.vue"
	import ColorfulLabel from "../../components/ColorfulLabel/index.vue"
	export default {
		data() {
			return {
				arr: [],
				limit: 20,
				page: 0,
				isOk: false
			}
		},
		methods: {
			follow: function(id) {
				this.jumpLink({
					link: "/pages/Customerstofollowup/index",
					query: {
						id: id
					}
				})
			},
			offer: function(id) {
				this.jumpLink({
					link: "/pages/offer/index",
					query: {
						id: id,
						save: 1
					}
				})
			},
			// 上传客源
			uploadpassenger() {
				this.jumpLink({
					link: "/pages/shuangchuangkeyuan/index"
				})
			},
			// 拨打电话
			call(item){
				uni.makePhoneCall({
				    phoneNumber: item,
				});
			},
			getList() {
				if (this.isOk) {
					return uni.showToast({
						icon: 'none',
						title: '没有更多了'
					})
				}
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				this.page++
				let data = {
					page: this.page,
					limit: this.limit
				}
				passengersourcedata(data).then(res => {
					uni.hideLoading()
					this.arr = this.arr.concat(res.data)
					if (res.data.length < this.limit) {
						this.isOk = true
					}
				})
			},
			// 推入公客池
			pushout(id) {
				getpushout({
					id: id
				}).then(res => {
					this.arr = []
					this.isOk = false
					this.page = 0
					this.getList()
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					})
				})
			}
		},
		components: {
			BaseBottom,
			ColorfulLabel
		},
		onLoad() {},
		onShow() {
			this.arr = []
			this.isOk = false
			this.page = 0
			this.getList()
			uni.hideHomeButton();
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style scoped>
	.topbox {
		display: flex;
		align-items: center;
	}

	.callbox {
		display: flex;
		align-items: center;
	}

	.callbox>image {
		width: 50rpx;
		height: 50rpx;
		margin-left: 20rpx;
	}

	.addguest {
		width: 183rpx;
		height: 84rpx;
		background-color: #ff6666;
		border-radius: 41rpx;
		line-height: 84rpx;
		text-align: center;
		margin-top: 12rpx;
		color: #FFFFFF;
	}

	.box {
		background-color: #EFEFEF;
	}

	/* 头部输入框 */
	.inputbox {
		margin-left: 29rpx;
		margin-right: 21rpx;
		margin-top: 23rpx;
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		border: solid 2rpx #dfdfdf;
		display: flex;
		width: 500rpx;
	}

	.inputimg {
		width: 35rpx;
		height: 35rpx;
		margin-top: 23rpx;
		margin-left: 25rpx;
	}

	.inputbox>input {
		font-size: 24rpx;
		font-family: MicrosoftYaHei;
		margin-top: 14rpx;
		margin-left: 14rpx;
	}



	/* 客源信息 */
	.ifobox {
		margin: 29rpx 20rpx;
		background-color: #FFFFFF;
		box-shadow: 3rpx 4rpx 7rpx 0rpx rgba(180, 180, 180, 0.46);
		border-radius: 10rpx;
		padding: 40rpx 26rpx 22rpx 36rpx;
		box-sizing: border-box;
	}

	.ifobox>.left {
		display: flex;
		justify-content: space-between;
	}

	.ifobox>.telephone {
		font-family: PingFang-SC-Heavy;
		font-size: 24rpx;
		color: #666666;
		display: block;
		margin-top: 20rpx;
	}

	.ifobox>.left>.typestyle {
		width: 115rpx;
		height: 50rpx;
		background-color: #ffba00;
		border-radius: 18rpx;
		line-height: 50rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 20rpx;
		color: rgba(0);
	}

	.plotname {
		font-family: MicrosoftYaHei-Bold;
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		color: #000000;
	}

	.square {
		font-size: 22rpx;
		font-weight: 700;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #666666;
		margin-left: 23rpx;
		font-family: MicrosoftYaHei-Bold;
	}

	.dwon {
		margin-top: 20rpx;
	}


	.house {
		font-family: PingFang-SC-Heavy;
		font-size: 24rpx;
		color: #666666;
		margin-left: 24rpx;
	}

	.name {
		font-family: PingFang-SC-Heavy;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #666666;
		margin-left: 20rpx;
	}

	.policebox {
		margin-top: 34rpx;
	}

	.police {
		width: 25rpx;
		height: 39rpx;
	}

	.dwell {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #666666;
		margin-left: 18rpx;
	}

	.username {
		font-family: MicrosoftYaHei;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #666666;
		margin-left: 18rpx;
	}

	.right {
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		font-weight: normal;
		font-stretch: normal;
		color: #993300;
		width: 128rpx;
		height: 60rpx;
		background-color: #ffcc00;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin-top: 12rpx;
	}

	.lastbox {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.hr {
		margin-right: 16rpx;
		height: 1rpx;
		width: 100%;
		background-color: #efefef;
		margin-top: 30rpx;
	}

	.btnbox {
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
	}

	.offer {
		width: 160rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #df4744;
		line-height: 61rpx;
		color: #d72f2c;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		text-align: center;
	}

	.follow {
		width: 160rpx;
		height: 61rpx;
		background-color: #ffffff;
		border-radius: 31rpx;
		border: solid 3rpx #f48f0c;
		line-height: 61rpx;
		color: #e98200;
		font-family: MicrosoftYaHei;
		font-size: 26rpx;
		text-align: center;
		margin-left: 24rpx;
	}

	.lablebox {
		margin-top: 30rpx;
	}
</style>
